@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.plans main {
	@include break-medium {
		padding-top: 24px;
	}
	// a formatted-header instance used within main (not as section header)
	.plans__formatted-header {
		&.is-domain-upsell {
			margin-top: 30px;
			display: flex;
			justify-content: center;

			.formatted-header__title,
			.formatted-header__subtitle {
				max-width: $break-medium;
			}

			.formatted-header__title {
				font-size: 2rem;
			}
		}
	}
}

body.is-section-plans {
	.layout:not(.has-no-sidebar):not(.is-global-sidebar-visible) .layout__content {
		@media (min-width: $break-small) {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
		@media (min-width: $break-medium) {
			padding-left: calc(var(--sidebar-width-max) + 1px) !important;
			padding-right: 0 !important;
		}
		@media (max-width: $break-medium) {
			.navigation-header {
				padding-left: max(calc(50% - 612px), 32px);
				padding-right: max(calc(50% - 612px), 32px);
			}
			.section-nav__panel {
				padding: 0 max(calc(50% - 612px), 32px);
			}
			.main {
				padding: 17px max(calc(50% - 612px), 32px);
			}
		}
		@media (max-width: $break-mobile) {
			.navigation-header {
				padding-left: max(calc(50% - 612px), 15px);
				padding-right: max(calc(50% - 612px), 15px);
			}
			.section-nav__panel {
				padding: 0 max(calc(50% - 612px), 15px);
			}
			.main {
				padding: 17px max(calc(50% - 612px), 15px);
			}
		}
	}

	.layout:not(.has-no-sidebar):not(.has-no-masterbar):not(.is-global-sidebar-visible) .layout__content {
		@media (min-width: $break-small) {
			padding-top: 79px !important;
		}
	}
}

